import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaTableEditable,
    WeaDialog,
} from "ecCom";
import {Button} from "antd";
import NoRightComponent from '../NoRightComponent.js';
import AddWorkflowMouldSetting from './AddWorkflowMouldSetting';
import BookmarkMatchingComponent from './BookmarkMatchingComponent';
import MouldTableMatchingComponent from './MouldTableMatchingComponent';
import ImportMouldsTable from './ImportMouldsTable';
import Point from '../public/Point';
import * as IconConstant from '../../constant/IconConstant.js';
import LanguageConstant from '../../constant/LanguageConstant';
import '../../style/mouldSetting.less';

const {getLabel} = WeaLocaleProvider;

@inject("workflowSettingStore", "bookmarkMatchingStore", "tableMatchingStore")
@observer
class MouldSetting extends Component {

    componentDidMount() {
        const {workflowSettingStore} = this.props;
        workflowSettingStore.getWorkflowMouldRelationalTable();
    }

    render() {
        const {workflowSettingStore} = this.props;
        const {
            closeDialog, loading, dialogVisible, bookmarksMatchingDialogVisible, importMouldsDialogVisible
            , mouldTableMatchingDialogVisible, bookmarksMatchingWorkflowMouldRelationalId
        } = workflowSettingStore;
        const dialogBtns = this.getDiaglogBtns();
        const dialogTitle = this.getDialogTitle();
        return (
            <div className="mould-setting-component">
                <Fragment>
                    {this.renderWorkflowMouldRelationalTable()}
                    <WeaDialog
                        onCancel={() => closeDialog()}
                        title={dialogTitle}
                        visible={toJS(dialogVisible)}
                        style={{width: "60%", height: 680}}
                        hasScroll
                        buttons={dialogBtns}
                        icon={IconConstant.WEADIALOG_ICON}
                        iconBgcolor={IconConstant.WEADIALOG_ICON_BG_COLOR}
                        className="add-workflow-setting-dialog"
                    >
                        <Fragment>
                            {bookmarksMatchingDialogVisible && <BookmarkMatchingComponent
                                workflowMouldRelationalId={toJS(bookmarksMatchingWorkflowMouldRelationalId)}/>}
                            {importMouldsDialogVisible && <ImportMouldsTable/>}
                            {mouldTableMatchingDialogVisible && <MouldTableMatchingComponent
                                workflowMouldRelationalId={toJS(bookmarksMatchingWorkflowMouldRelationalId)}/>}
                        </Fragment>
                    </WeaDialog>
                </Fragment>
            </div>
        );
    }

    /**
     * 获取弹框的按钮
     *
     * @returns {Array}
     */
    getDiaglogBtns = () => {
        const buttons = [];
        const {workflowSettingStore} = this.props;
        const {
            bookmarksMatchingDialogVisible, importMouldsDialogVisible, onSaveImportMouldDatas, loading
            , mouldTableMatchingDialogVisible
        } = workflowSettingStore;
        if (toJS(bookmarksMatchingDialogVisible) === true) {
            buttons.push(<Button type="primary" disabled={loading}
                                 onClick={() => this.saveBookmarksMatching()}>{getLabel(LanguageConstant.SAVE, "保存")}</Button>);
        } else if (toJS(importMouldsDialogVisible) === true) {
            buttons.push(<Button type="primary" disabled={loading}
                                 onClick={() => onSaveImportMouldDatas()}>{getLabel(LanguageConstant.SAVE, "保存")}</Button>);
        } else if (toJS(mouldTableMatchingDialogVisible) == true) {
            buttons.push(<Button type="primary" disabled={loading}
                                 onClick={() => this.saveMouldTableMatchingTableDatas()}>{getLabel(LanguageConstant.SAVE, "保存")}</Button>);
        }
        return buttons;
    }

    /**
     * 获取弹框的标题
     *
     * @returns {string}
     */
    getDialogTitle = () => {
        const {workflowSettingStore} = this.props;
        const {bookmarksMatchingDialogVisible, importMouldsDialogVisible, mouldTableMatchingDialogVisible} = workflowSettingStore;
        let dialogTitle = "";
        if (toJS(bookmarksMatchingDialogVisible) === true) {
            dialogTitle = getLabel(LanguageConstant.BOOKMARKS_MATCHING, '书签匹配');
        } else if (toJS(importMouldsDialogVisible) === true) {
            dialogTitle = getLabel(LanguageConstant.IMPORT_MOULD, '导入模板');
        } else if (toJS(mouldTableMatchingDialogVisible) === true) {
            dialogTitle = getLabel(LanguageConstant.TABLE_MATCHING, '表格匹配');
        }
        return dialogTitle;
    }

    /**
     * 保存书签
     */
    saveBookmarksMatching = () => {
        const {bookmarkMatchingStore, workflowSettingStore} = this.props;
        const {closeDialog, getWorkflowMouldRelationalTable} = workflowSettingStore;
        const {saveBookmarkMatching} = bookmarkMatchingStore;
        saveBookmarkMatching(null, () => {
            closeDialog();
            getWorkflowMouldRelationalTable();
        });
    }

    /**
     * 保存模板表格匹配数据
     */
    saveMouldTableMatchingTableDatas = () => {
        const {tableMatchingStore, workflowSettingStore} = this.props;
        const {closeDialog, getWorkflowMouldRelationalTable} = workflowSettingStore;
        const {saveMouldTableMatchingTable} = tableMatchingStore;
        saveMouldTableMatchingTable(() => {
            closeDialog();
            getWorkflowMouldRelationalTable();
        });
    }

    /**
     * 渲染流程模板关系列表
     *
     * @returns {*}
     */
    renderWorkflowMouldRelationalTable() {
        const {workflowSettingStore} = this.props;
        const {
            openBookmarksMatchingDialog, workflowMouldRelationalDatas, affirmWorkflowMouldRelationalDelete,
            onWorkflowMouldRelationalRowSelect, addWorkflowMouldRelationals, workflowMouldRelationalTableCustomBtnsClick,
            openMouldTableMatchingDialog
        } = workflowSettingStore;
        const bookmarksMatching = getLabel(LanguageConstant.BOOKMARKS_MATCHING, '书签匹配');
        const tableMatching = getLabel(LanguageConstant.TABLE_MATCHING, '表格匹配');
        const pointStyle = {
            padding: '0px 10px',
            display: 'inline-block',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            width: '8px',
        };
        const columns = [{
            title: getLabel(LanguageConstant.MOULD_NAME, "模板名称"),
            dataIndex: "mouldName",
            width: "55%",
            com: [
                {
                    type: "CUSTOM",
                    key: "mouldName",
                    render: (text, record, index, onEdit) => {
                        const {mouldName, editedBookmarksMatching, mouldId} = record;
                        const warning = <span></span>
                        return (
                            <div>
                                <span className="mould-name-wrapper" title={mouldName}>{mouldName}</span>
                                <Point displayStyle={pointStyle} visible={!editedBookmarksMatching}/>
                            </div>
                        );
                    }
                },
            ]
        }, {
            title: "",
            dataIndex: "id",
            width: "22%",
            com: [
                {
                    type: "CUSTOM",
                    key: "id",
                    render: (text, record, index, onEdit) => {
                        const {id} = record;
                        return (<a onClick={() => openBookmarksMatchingDialog(id)}>{bookmarksMatching}</a>);
                    }
                },
            ]
        }, {
            title: "",
            dataIndex: "id",
            width: "22%",
            com: [
                {
                    type: "CUSTOM",
                    key: "id",
                    render: (text, record, index, onEdit) => {
                        const {id, canMatchingTable} = record;
                        return canMatchingTable ? (
                            <a onClick={() => openMouldTableMatchingDialog(id)}>{tableMatching}</a>) : "";
                    }
                },
            ]
        }];
        return (
            <WeaTableEditable
                rowKey="id"
                initialDatas={toJS(workflowMouldRelationalDatas)}
                datas={toJS(workflowMouldRelationalDatas)}
                columns={columns}
                getRowSelection={this.getRowSelection}
                showAdd={true}
                showDelete={true}
                willAdd={addWorkflowMouldRelationals}
                showCopy={false}
                showRowSelect={true}
                willDelete={affirmWorkflowMouldRelationalDelete}
                onRowSelect={onWorkflowMouldRelationalRowSelect}
                buttonsType={"inline"}
            />
        );

    }


    getRowSelection = rowSelection => {
        const sel = {...rowSelection};
        return sel;
    }

}

export default MouldSetting;